<!-- 咨询分类 -->

<script setup>
import {
  getConsultApi,
  getContentCateApi,
  getdelContentCateListApi,
  getContentCateListApi,
  getEditContentCateListApi,
} from "@/api/consult";
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
// ===========================================
// 弹出层
const isShow = ref(false);
// 关闭事件
const closeHandler = () => {};
// ===========================================

// 创建列表功能
const queryData = reactive({
  current: 1, //每页的页码
  pageSize: 3, //每页数量
  catename: "", //分类名
});
// ===========================================
const total = ref(0);
const list = ref([]);
const initData = async () => {
  const {
    data: { rows, count },
  } = await getConsultApi(queryData);
  // console.log(rows, count);
  total.value = count;
  list.value = rows;
};

// ============================================
onMounted(() => {
  initData();
});
// ===========================================
// 每页数量切换
const sizeChange = (val) => {
  queryData.pageSize = val;
  initData();
};
// //页码切换
const currentChange = (val) => {
  queryData.current = val;
  initData();
};
// ============================================
// 新增区域绑定
const formData = reactive({
  catename: "", //分类名
});
// ===========================================
// 新增区域表单验证规则
const fromRules = {
  catename: [{ required: true, message: "请输入", trigger: "blur" }],
};
// 表单校验
const formRef = ref();
// ==========================================
// 提交按钮表单校验
const onSubmit = async () => {
  try {
    // 提交校验
    await formRef.value.validate();
    // 提交数据
    const data = toRaw(formData);
    formData.id
      ? await getEditContentCateListApi(data)
      : await getContentCateApi(data);
    // await getContentCateApi(toRaw(formData))
    // 提示成功
    ElMessage.success("增加成功");
    // 关闭弹窗
    isShow.value = false;
    // 列表刷新
    // console.log(1111);
    initData();
  } catch (error) {
    console.log(error);
  }
};
// ============================================
// 编辑功能
const editRow = (id) => {
  // isShow.value = true
  replyData(id);
};
// // 编辑功能
const addRef = ref();
// // 数据回显
const replyData = async (id) => {
  // alert(id)
  let { data } = await getContentCateListApi(id);
  // console.log(res);
  Object.assign(formData, data);
  isShow.value = true;
};
// 标题
const title = computed(() => {
  return formData.id ? "编辑广告" : "新增广告";
});
// 删除功能
const delRow = async (id) => {
  // alert(id)
  await getdelContentCateListApi(id);
  ElMessage.success("删除成功");
  if (queryData.pageSize > 1 && list.value.length === 1) queryData.current--;
  initData();
};
// 关闭抽屉
const closeDra = async () => {
  Object.assign(formData, {
    catename: "", //分类名
  });
  await nextTick(() => {
    formRef.value.resetFields();
  });
};
</script>

<template>
  <div class="app-container">
    <span>
      <h3 style="font-weight: 700; display: inline-block">咨询分类</h3>
      对于文章的进行的相关分类
    </span>
    <!-- 工具区域 -->
    <el-card>
      <el-row type="flex" justify="space-between">
        <div></div>
        <div>
          <el-button type="primary" size="small" @click="isShow = true"
            >新增分类</el-button
          >
        </div>
      </el-row>
      <br />
      <el-table :data="list" border stripe>
        <el-table-column type="index" label="ID"></el-table-column>
        <el-table-column label="分类名" align="center">
          <template #default="{ row }">
            {{ row.catename }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-button size="small" @click="editRow(row.id)" type="text"
              >编辑</el-button
            >
            <el-popconfirm title="确定删除嘛?" @confirm="delRow(row.id)">
              <template #reference>
                <el-button size="small" type="text">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <br />
      <!-- 分页区域 -->
      <el-pagination
        small="true"
        @size-change="sizeChange"
        @current-change="currentChange"
        v-model:current-page="queryData.current"
        :page-sizes="[3, 5, 10]"
        v-model:page-size="queryData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      >
        :pager-count="7">
      </el-pagination>
      <!-- 内容区域 -->
      <!-- 弹出框 -->
      <el-dialog :title="title" v-model="isShow" width="35%" @close="closeDra">
        <!-- 新增 -->
        <el-form
          label-width="80px"
          :inline="false"
          size="normal"
          :model="formData"
          :rules="fromRules"
          ref="formRef"
        >
          <el-form-item label="分类名称" prop="catename">
            <el-input v-model="formData.catename"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="right">
              <el-button size="small">取消</el-button>
              <el-button size="small" type="primary" @click="onSubmit"
                >确定</el-button
              >
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>
<style>
.right {
  margin-left: 304px;
}
</style>
